import { Box, SxProps } from "@mui/system";
import React from "react";
export interface CircleWrapperProps extends React.DOMAttributes<any> {
  sx?: SxProps;
}
export default ({ sx, children, ...otr }: CircleWrapperProps) => {
  return (
    <Box
      sx={{
        border: "2px solid #fff",
        opacity: 0.8,
        boxShadow: "0 1px 1px rgba(0,0,0,.2)",
        transition: "all .1s ease",
        textShadow: "0 1px 1px rgba(0,0,0,.2)",
        position: "absolute",
        left: "50%",
        top: "50%",
        transform: "translate(-50%,-50%)",
        boxSizing: "border-box",
        backgroundColor: "rgba(0,0,0,.2)",
        borderRadius: "50%",
        width: "inherit",
        height: "inherit",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        ...sx,
      }}
      {...otr}
    >
      {children}
    </Box>
  );
};
